<template>
  <view class="page">
    <!--评价筛选-->
    <view class="evaluate-filtrate">
		<view class="filtrate-list">
			<view class="list" v-for="v in filters">
				<view class="list" @click="clickType(v.value)">
					<text class="action" v-if="rating == v.value">{{v.label}}{{v.count}}</text>
					<text v-if="rating != v.value">{{v.label}}{{v.count}}</text>
				</view>
			</view>
		</view>
	</view>
    <view class="evaluate-data">
      <view class="evaluate-list">
        <view class="list" v-for="(v,i) in list">
          <view class="user-info">
            <view class="thumb">
              <image :src="(v.user_img)" mode=""></image>
            </view>
            <view class="nickname-grade">
              <view class="nickname">
                <text>{{v.user_name}}</text>
              </view>
              <view class="grade">
                <view class="star">
                  <text class="cuIcon-favorfill lg text-gray" v-for="(value,idx) in v.rating" :key="idx"></text>
                </view>
                <view class="date">
                  <text>{{v.create_time}}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="content">
            <view class="character">
              <text class="two-omit">{{v.text}}</text>
            </view>
            <view class="attr">
              <text>{{v.object_id}}</text>
            </view>
            <view class="thumb-list">
              <view class="video-info" @click="isVideoShow = true">
                <image src="" class="picture"></image>
                <view class="shade">
                  <text class="iconfont icon-bofang"></text>
                </view>
              </view>
              <view class="list" v-for="(value,idx) in v.file"
                    @click="onPreview(value,idx)"
                    :key="idx">
                <image :src="(value)"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--视频播放-->
   <view class="video-win" @click="onCloseVideo">
      <view class="cu-modal" :class="{'show':isVideoShow}">
        <view class="cu-dialog" @click.stop>
          <view class="bg-img" v-show="isVideoShow">
            <video id="evaluate-video" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"></video>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import comment from '../../pages/api/comment.js';
	
export default {
  data() {
    return {
		isVideoShow: false,
		filters: [
			{ label: '全部', value: 0, count: 0 },
			{ label: '好评', value: 1, count: 0 },
			{ label: '中评', value: 2, count: 0 },
			{ label: '差评', value: 3, count: 0 }
		],
		rat:[0,1,2,3],
		currentFilter: 0,
		loading: false,
		hasMore: true,
		videoContext: '',
		list:[],
		page:1,
		size:5,
		order:0,
		rating:0,
		object_id:101,
		object_type:1,
    };
  },
  onReady: function (res) {
    this.videoContext = uni.createVideoContext('evaluate-video')
  },
  onLoad(){
	this.commentList()
	this.commentNum()
  },
  methods:{
    /**
     * 图片点击预览
     * @param item
     * @param index
     */
	clickType(rat){
		this.page=1,
		this.list=[],
		this.rating=rat,
		this.commentList()
	},
	async commentNum(){
		comment.commentGetNum({
			rating:this.rat
		}).then(res => {
			this.filters.forEach(filter=>{
				filter.count=res.data.Num[filter.value]
			})
		})
	},
	commentList(){
		comment.commentGet({
			page:this.page,
			size:this.size,
			order:this.order,
			rating:this.rating,
			object_id:this.object_id,
			object_type:this.object_type,
		}).then(res => {
			if (!res.data) {
				return
			}
			this.list = this.list.concat(...res.data)
		})
	},
	
    onPreview(item,index){
      uni.previewImage({
        urls: this.urls,
        indicator: 'number',
        current: index,
        longPressActions: {
          itemList: ['发送给朋友', '保存图片', '收藏'],
          success: function(data) {
            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
          },
          fail: function(err) {
            console.log(err.errMsg);
          }
        }
      });
    },
	onReachBottom() {
	    if (!this.loading && this.hasMore) {
	      this.page++;
	      this.commentList();
	    }
	  },
    /**
     * 关闭视频点击
     */
    onCloseVideo(){
      this.videoContext.pause();
      this.isVideoShow = false;
    },
	
  }
}
</script>

<style scoped lang="scss">
@import "GoodsEvaluateList.scss";
</style>